import { unitWidth, timeScaleHeight, milestoneTopHeight, barHeight, barMargin } from './initialization.js';

/**
 * 绘制里程碑
 * @param {Object} zr ZRender实例
 * @param {Array} mileStones 里程碑数组
 * @param {Object} chartState 图表状态对象
 * @param {Array} tasks 任务数组
 */
export function drawMilestones(zr, mileStones, chartState, tasks) {
  mileStones.forEach(function (item) {
    // 绘制里程碑垂直线
    const milestone = new zrender.Rect({
      shape: {
        x: chartState.chartStartX + item.start * unitWidth - 1,
        y: chartState.chartStartY - timeScaleHeight,
        width: 2,
        height: tasks.length * (barHeight + barMargin) + timeScaleHeight
      },
      style: {
        fill: "rgba(255, 0, 0, 1)"
      },
      z: 1
    });

    // 绘制里程碑顶部背景
    const milestone_top = new zrender.Rect({
      shape: {
        x: chartState.chartStartX + item.start * unitWidth - 1,
        y: chartState.chartStartY - timeScaleHeight - milestoneTopHeight,
        width: 10,
        height: milestoneTopHeight
      },
      style: {
        fill: "rgba(255, 0, 0, 1)"
      },
      z: 1
    });

    // 绘制里程碑文字
    const milestone_top_text = new zrender.Text({
      style: {
        x: chartState.chartStartX + item.start * unitWidth - 1 + 10,
        y: chartState.chartStartY - timeScaleHeight - milestoneTopHeight,
        text: item.name || '里程碑',
        fill: "white",
        lineHeight: milestoneTopHeight,
        fontSize: 12
      },
      z: 1
    });

    // 调整顶部背景宽度以适应文字
    const milestone_top_text_rect = milestone_top_text.getBoundingRect();
    milestone_top.attr({
      shape: {
        width: milestone_top_text_rect.width + 10 * 2,
      }
    });

    zr.add(milestone);
    zr.add(milestone_top);
    zr.add(milestone_top_text);
  });
} 